<template>
  <div class="positionDetail">
    <div id="container">
      <div class="clearfix">
        <div class="content_l">
          <dl class="job_detail">
            <dt>
              <h1>
                <!-- <div>{{jobItem.company.title}}</div> -->
                {{jobItem.job_title != '' ? jobItem.job_title : jobItem.position.position_title }}
              </h1>
              <div
                class="collection"
                @click="collectAction(jobItem.star && jobItem.star.job_id == jobItem.job_id)"
              >
                <img
                  class="star"
                  v-if="!(jobItem.star && jobItem.star.job_id == jobItem.job_id)"
                  src="https://file.open.banchengyun.com/353/51f659bcf1f64c4e7c90b76497ec3636"
                />
                <img
                  class="star"
                  v-else
                  src="https://file.open.banchengyun.com/353/5e79803097913d5c400bf1c900fffc7f"
                />
                <div class="not" v-if="!(jobItem.star && jobItem.star.job_id == jobItem.job_id)">收藏</div>
                <div class="not" v-else>已收藏</div>
              </div>
            </dt>
            <dd class="job_request">
              <!-- 薪资 -->
              <span
                class="red"
                v-if="jobItem.salary_unit != 4"
              >{{jobItem.salary_min}}-{{jobItem.salary_max}} {{salaryUnit(jobItem.salary_unit)}}</span>
              <span v-else>面议</span>
              <div
                v-if="jobItem.job_experience_min == jobItem.job_experience_max && jobItem.job_experience_max == 0"
              >工作经验：经验不限</div>
              <div
                v-else-if="jobItem.job_experience_min == jobItem.job_experience_max && jobItem.job_experience_max != 0"
              >工作经验：{{jobItem.job_experience_max}}年</div>
              <div
                v-else-if="jobItem.job_experience_min == jobItem.job_experience_max && jobItem.job_experience_max != 0"
              >工作经验：{{jobItem.job_experience_min}}-{{jobItem.job_experience_max}}年</div>
              <div v-else>工作经验：经验不限</div>
              <div>学历要求：{{educationArr(jobItem.job_education)}}</div>
              <div>职位类型：{{jobType(jobItem.job_type)}}</div>
              <div v-if="jobItem.tag.length" style="display:flex;align-items:center">
                福利：
                <div class="itemTag" v-for="(tag,index) in jobItem.tag" :key="index">{{jobTag(tag.tag_type)}}</div>
              </div>
              <div>发布时间：{{transDate(jobItem.time_update)}}发布</div>
            </dd>
            <dd class="job_bt">
              <h3 class="description">职位描述</h3>
              <span class="job-text" v-html="jobItem.job_description"></span>
            </dd>
          </dl>
          <div id="weibolist"></div>
        </div>
        <div class="content_r">
          <dl class="job_company">
            <dd>
              <span style="font-size: 1rem;font-weight: 600;">{{jobItem.company.title}}</span>
              <ul class="c_feature reset">
                <!-- <li><span>福利待遇</span> 移动互联网,电子商务</li> -->
                <li>
                  <span>规模：</span>
                  {{companyScale(jobItem.company.scale)}}
                </li>
                <!-- <li><span>企业简介：</span> {{jobItem.company.description}}</li> -->
              </ul>
              <br />
              <span style="font-size: 1rem;font-weight: 600;">企业简介</span>
              <div>{{jobItem.company.description}}</div>
              <br />
              <span style="font-size: 1rem;font-weight: 600;">工作地址</span>
              <div>{{jobItem.company.address}}</div>
            </dd>
          </dl>
          <div class="applyBtn">
            <!-- 用户是否激活 0-否；1-是 -->
            <a
              title="投个简历"
              class="btn fr btn_apply"
              href="javascript:void(0)"
              @click="applyPort"
            >投个简历</a>
          </div>
          <!-- <div id="myRecommend_jd">
						<h2>可能适合你的职位 <i>匹配度</i></h2>
						<ul class="reset">
							<li>
								<a target="_blank" href="jobs/22194.html">
									<span class="f14">产品经理</span>
									<span class="c7">广州百田</span>
									<em>92%</em>
								</a>
							</li>
							<li>
								<a target="_blank" href="jobs/148004.html">
									<span class="f14">产品经理</span>
									<span class="c7">短讯神州</span>
									<em>92%</em>
								</a>
							</li>
							<li>
								<a target="_blank" href="jobs/46793.html">
									<span class="f14">产品经理</span>
									<span class="c7">爱拍</span>
									<em>89%</em>
								</a>
							</li>
							<li>
								<a target="_blank" href="jobs/99307.html">
									<span class="f14">产品经理</span>
									<span class="c7">一彩票</span>
									<em>88%</em>
								</a>
							</li>
							<li>
								<a target="_blank" href="jobs/147510.html">
									<span class="f14">产品经理</span>
									<span class="c7">林安集团</span>
									<em>88%</em>
								</a>
							</li>
						</ul>
          </div>-->
          <!--end #myRecommend-->
          <!-- <a class="eventAd" target="_blank"
						href="subject/s_zhouyou.html?utm_source=BD__lagou&amp;utm_medium=&amp;utm_campaign=zhouyou">
						<img width="280" height="135" src="style/images/zhouyou.jpg">
          </a>-->
        </div>
      </div>

      <div id="tipOverlay"></div>
    </div>
    <!-- end #container -->
    <PhoneModal :info="phoneModalInfo"></PhoneModal>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { JobItem } from "~/api/worker/job.js";
import { Star } from "~/api/allRequest.js";
import { getSalaryUnit, getJobTag } from "~/common/js/util.js";
import PhoneModal from "~/components/phoneModal/phoneModal";

export default {
  name: "positionDetail",
  data() {
    return {
      job_id: "",
      jobItem: {},
      phoneModalInfo: {
        title: "投递简历",
        content: "扫一扫投递，手机操作更便捷"
      }
    };
  },
  components: { PhoneModal },
  mounted() {
    this.job_id = this.$route.query.job_id;

    this.getJobItem();
  },
  methods: {
    async getJobItem() {
      //获取职位列表
      let jobItemResult = await JobItem({ job_id: this.job_id }).catch(err => {
        Message.error("系统错误，请联系技术人员。" + err);
      });

      this.jobItem = jobItemResult;
    },
    salaryUnit(type) {
      return getSalaryUnit(type);
    },
    jobTag(index) {
      return getJobTag(index);
    },
    educationArr(index) {
      return [
        "学历不限",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ][index];
    },
    genderArr(index) {
      return ["男女不限", "男", "女"][index];
    },
    transDate(str = "") {
      try {
        str = str.split("-");
        return str[1] + "月" + str[2].split(" ")[0] + "日";
      } catch (error) {
        return "";
      }
    },
    jobType(index) {
      return ["全职", "兼职", "实习"][index];
    },
    companyScale(index) {
      return ["未知", "1-10人", "10-20人", "20-50人", "50-100人", "100人以上"][
        index
      ];
    },
    collectAction(state) {
      let action = 1;
      if (state) {
        this.jobItem.star = null;
        action = 0;
      } else {
        this.jobItem.star = { job_id: this.jobItem.job_id };
        action = 1;
      }

      Star({ job_id: this.jobItem.job_id, action })
        .then(result => {
          this.$message.success(state ? "取消收藏成功" : "收藏成功");
        })
        .catch(err => {
          console.log(err);
        });
    },
    applyPort() {
      this.$store.dispatch("changePhoneModal", true);
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../../public/less/job_detail.less";
// @import "./../../../public/less/main.less";
.positionDetail {
  .collection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10%;
    float: right;
    .star {
      width: 34px;
      height: 34px;
    }
    .not {
      font-size: 12px;
    }
  }
  .applyBtn {
    background: #91cebe;
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: white;
    margin-top: 100px;
    a {
      color: white;
    }
  }
  .itemTag{
    font-size: 12px;
    padding: 0 5px;
    background: #fff;
    border: 1px solid #a9a9a9;
    color: #a9a9a9;
    margin: 5px 15px 0 0;
    line-height: 18px;
  }
}
</style>
